<template>
    <div style="margin-left: 30px;margin-top: 60px;">
        <span style="color: #1890FF;font-size: 20px;font-weight: bold;margin-right: 60px;">屠宰信息</span>
        <el-button type="info" @click="form.dialogFormVisible = true">设置</el-button>
        <hr style="margin-top: 40px;margin-bottom: 40px;">
        <div style="margin-bottom: 40px;">
            <span v-if="form.SlaughterIsdeleted == false"
                style="color: #797979;font-size: 16px;font-weight: bold;">暂无数据，请点击设置添加数据</span>
            <table v-else style="width: 60%;">
                <tr style="height: 40px;">
                    <td>批次：{{ SlaughterFind.slaughterLot }}</td>
                    <td>到厂均重：{{ SlaughterFind.slaughterWeight }}</td>
                </tr>
                <tr style="height: 40px;">
                    <td>到厂时间：{{ SlaughterFind.slaughterstartTime }} 天</td>
                    <td>屠宰时间：{{ SlaughterFind.slaughterEndTime }}</td>
                </tr>
            </table>
        </div>
        <span style="color: #1890FF;font-size: 20px;font-weight: bold;margin-right: 60px;">相关资质</span>
        <hr style="margin-top: 40px;margin-bottom: 40px;">
        <div>
            <el-upload v-model:file-list="fileListCultivation" action="https://localhost:7169/api/Good/LoadImages"
                list-type="picture-card" :limit="9" :on-remove="handleRemove" :on-exceed="exceedImages"
                :on-success="successImages">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>

            <el-dialog v-model="dialogVisible">
                <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
        </div>
        <span style="color: #1890FF;font-size: 20px;font-weight: bold;margin-right: 60px;">企业信息</span>
        <el-button type="info" @click="form.dialogFormVisible1 = true">设置</el-button>
        <hr style="margin-top: 40px;margin-bottom: 40px;">
        <div style="margin-bottom: 40px;">
            <span v-if="form.EnterpriseIsDeleted == false"
                style="color: #797979;font-size: 16px;font-weight: bold;">暂无数据，请点击设置添加数据</span>
            <table v-else style="width: 60%;">
                <tr style="height: 40px;">
                    <td>公司名称：{{ EnterpriseFind.slaughterEnterpriseName }}</td>
                    <td>成立时间：{{ EnterpriseFind.slaughterEnterpriseAddress }}</td>
                </tr>
                <tr style="height: 40px;">
                    <td colspan="2">公司地址：{{ EnterpriseFind.slaughterEnterpriseTime }} 天</td>
                </tr>
                <tr style="height: 40px;">
                    <td colspan="2">公司简介：{{ EnterpriseFind.slaughterEnterpriseComment }}</td>
                </tr>
            </table>
        </div>
        <span style="color: #1890FF;font-size: 20px;font-weight: bold;margin-right: 60px;">企业照片</span>
        <hr style="margin-top: 40px;margin-bottom: 40px;">
        <div>
            <el-upload v-model:file-list="fileListCultivationEnterprise" action="https://localhost:7169/api/Good/LoadImages"
                list-type="picture-card" :limit="9" :on-remove="handleRemove" :on-exceed="exceedImages"
                :on-success="successImagesEnterprise">
                <el-icon>
                    <Plus />
                </el-icon>
            </el-upload>

            <el-dialog v-model="dialogVisible">
                <img w-full :src="dialogImageUrl" alt="Preview Image" />
            </el-dialog>
        </div>
    </div>
    <!-- 屠宰添加弹框 -->
    <div>
        <el-dialog v-model="form.dialogFormVisible" title="养殖信息" width="500">
            <el-form :model="SlaughterFind">
                <el-form-item label="批次：" :label-width="140">
                    <el-input v-model="SlaughterFind.slaughterLot" autocomplete="off" placeholder="请填写批次" />
                </el-form-item>
                <el-form-item label="到厂均重：" :label-width="140">
                    <el-input v-model="SlaughterFind.slaughterWeight" autocomplete="off" placeholder="请填写到厂均重" />
                </el-form-item>
                <el-form-item label="到厂时间：" :label-width="140">
                    <el-date-picker v-model="SlaughterFind.slaughterstartTime" type="date" placeholder="请选择到厂时间"
                        :size="true" format="YYYY/MM/DD HH:mm:ss" />
                </el-form-item>
                <el-form-item label="屠宰时间：" :label-width="140">
                    <el-date-picker v-model="SlaughterFind.slaughterEndTime" type="date" placeholder="请选择屠宰时间"
                        :size="true" format="YYYY/MM/DD HH:mm:ss" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <!-- <el-button @click="escData()">取消</el-button> -->
                    <el-button v-if="form.SlaughterIsdeleted == false" type="success" @click="addSlaughter()">
                        保存
                    </el-button>
                    <el-button v-else type="primary" @click="updateSlaughter()">
                        修改
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
    <!-- 屠宰企业添加弹框 -->
    <div>
        <el-dialog v-model="form.dialogFormVisible1" title="企业信息" width="500">
            <el-form :model="EnterpriseFind">
                <el-form-item label="公司名称：" :label-width="140">
                    <el-input v-model="EnterpriseFind.slaughterEnterpriseName" autocomplete="off"
                        placeholder="请填写公司名称" />
                </el-form-item>
                <el-form-item label="公司地址：" :label-width="140">
                    <el-input v-model="EnterpriseFind.slaughterEnterpriseAddress" autocomplete="off"
                        placeholder="请填写公司地址" />
                </el-form-item>
                <el-form-item label="成立时间：" :label-width="140">
                    <el-date-picker v-model="EnterpriseFind.slaughterEnterpriseTime" type="date" placeholder="请选择成立时间"
                        :size="true" format="YYYY/MM/DD" />
                </el-form-item>
                <el-form-item label="公司简介：" :label-width="140">
                    <el-input v-model="EnterpriseFind.slaughterEnterpriseComment" type="textarea"
                        placeholder="请选择公司简介" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <!-- <el-button @click="escData()">取消</el-button> -->
                    <el-button v-if="form.EnterpriseIsDeleted == false" type="success"
                        @click="addSlaughterEnterprise()">
                        保存
                    </el-button>
                    <el-button v-else type="primary" @click="updateSlaughterEnterprise()">
                        修改
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import axios from 'axios';
import { useCounterStore } from '@/stores/counter'
const store = useCounterStore();
const router = useRouter();
const route = useRoute();
const form = reactive({
    goodId: store.GoodId,
    SlaughterIsdeleted: false,
    EnterpriseIsDeleted: false,

    dialogFormVisible: false,
    dialogFormVisible1: false,
})
//屠宰表
const SlaughterFind = ref({
    slaughterId: '',
    slaughterLot: '',
    slaughterWeight: '',
    slaughterstartTime: '',
    slaughterEndTime: '',
    goodId: form.goodId,
})
//屠宰反填
const getSlaughterFind = () => {
    axios.get(`https://localhost:7169/api/Good/GetSlaughterFind?goodId=${form.goodId}`)
        .then(res => {
            // console.log(res.data)
            if (res.data != "") {
                SlaughterFind.value = res.data
                form.SlaughterIsdeleted = true
                SlaughterImages()
            }
        })
        .catch(err => {


            console.log(err)
        })
}
//添加屠宰
const addSlaughter = () => {
    console.log(SlaughterFind.value)
    axios.post('https://localhost:7169/api/Good/AddSlaughter', SlaughterFind.value)
        .then(res => {
            console.log(res.data)
            if (res.data > 0) {
                ElMessage.success('添加成功')
                // form.CultivationIsDeleted = true
                form.dialogFormVisible = false
                getSlaughterFind()
            }
            else {
                ElMessage.error('添加失败')
            }
        })
}
//修改屠宰
const updateSlaughter = () => {
    // getCultivationFind()
    axios.post('https://localhost:7169/api/Good/UpdateSlaughter', SlaughterFind.value)
        .then(res => {
            console.log(res.data)
            if (res.data > 0) {
                ElMessage.success('修改成功')
                form.dialogFormVisible = false
                getSlaughterFind()
            }
            else {
                ElMessage.error('修改失败')
            }
        })
}
// 上传图片
import type { UploadProps, UploadUserFile } from 'element-plus'

const fileListCultivation = ref<UploadUserFile[]>([
])
const fileListCultivationEnterprise = ref<UploadUserFile[]>([
])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
//删除图片
const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    let Url = uploadFile.url
    console.log(Url)

    axios.get(`https://localhost:7169/api/Good/DeletedImages?Url=${Url}`)
        .then(res => {
            ElMessage.success('删除成功')
        })
        .catch(err => {
            ElMessage.error('删除失败')

            console.log(err)
        })
}

//上传成功养殖
const successImages = ((response: any) => {
    if (SlaughterFind.value.slaughterId == '') {
        ElMessage.error('请先添加屠宰信息')
        return
    }
    // console.log(response)
    let Url = 'https://localhost:7169/' + response
    axios.get(`https://localhost:7169/api/Good/AddImage?Id=${SlaughterFind.value.slaughterId}&Url=${Url}`)
        .then(res => {
            ElMessage.success('上传成功')
        })
        .catch(err => {
            // ElMessage.error('上传失败')

            console.log(err)
        })
    fileListCultivation.value.forEach((c: any) => {
        if (c.response == response) {
            c.url = Url
            return
        }
    });
    // console.log(fileListCultivation)

}
)
//上传成功企业
const successImagesEnterprise = ((response: any) => {
    if (EnterpriseFind.value.slaughterEnterpriseId == '') {
        ElMessage.error('请先添加屠宰企业信息')
        return
    }
// console.log(response)
let Url = 'https://localhost:7169/' + response
axios.get(`https://localhost:7169/api/Good/AddImage?Id=${EnterpriseFind.value.slaughterEnterpriseId}&Url=${Url}`)
    .then(res => {
        ElMessage.success('上传成功')
    })
    .catch(err => {
        // ElMessage.error('上传失败')

        console.log(err)
    })
    fileListCultivationEnterprise.value.forEach((c: any) => {
    if (c.response == response) {
        c.url = Url
        return
    }
});
// console.log(fileListCultivation)

})
//反填屠宰资质图片
const SlaughterImages = () => {
    // console.log(CultivationFind.value)
    axios.get(`https://localhost:7169/api/Good/GetT_Images?Id=${SlaughterFind.value.slaughterId}`)
        .then(res => {
            console.log(res.data)
            fileListCultivation.value = []
            if (res.data.length > 0) {

                res.data.forEach((c: any) => {
                    fileListCultivation.value.push({ name: c.imageId, url: c.imageAddress })
                });

            }
        })
}
const EnterpriseFind = ref({
    slaughterEnterpriseId: '',
    slaughterEnterpriseName: '',
    slaughterEnterpriseAddress: '',
    slaughterEnterpriseTime: '',
    slaughterEnterpriseComment: '',
    goodId: form.goodId,
})
//屠宰企业反填
const getSlaughterEnterpriseFind = () => {
    axios.get(`https://localhost:7169/api/Good/GetSlaughterEnterpriseFind?goodId=${form.goodId}`)
        .then(res => {
            // console.log(res.data)
            if (res.data != "") {
                EnterpriseFind.value = res.data
                form.EnterpriseIsDeleted = true
                SlaughterEnterpriseImages()
            }
        })
        .catch(err => {


            console.log(err)
        })
}
//添加屠宰
const addSlaughterEnterprise = () => {
    console.log(SlaughterFind.value)
    axios.post('https://localhost:7169/api/Good/AddSlaughterEnterprise', EnterpriseFind.value)
        .then(res => {
            console.log(res.data)
            if (res.data > 0) {
                ElMessage.success('添加成功')
                // form.CultivationIsDeleted = true
                form.dialogFormVisible1 = false
                getSlaughterEnterpriseFind()
            }
            else {
                ElMessage.error('添加失败')
            }
        })
}
//修改屠宰
const updateSlaughterEnterprise = () => {
    // getCultivationFind()
    axios.post('https://localhost:7169/api/Good/UpdateSlaughterEnterprise', EnterpriseFind.value)
        .then(res => {
            console.log(res.data)
            if (res.data > 0) {
                ElMessage.success('修改成功')
                form.dialogFormVisible1 = false
                getSlaughterEnterpriseFind()
            }
            else {
                ElMessage.error('修改失败')
            }
        })
}
//反填屠宰企业图片
const SlaughterEnterpriseImages = () => {
    // console.log(CultivationFind.value)
    axios.get(`https://localhost:7169/api/Good/GetT_Images?Id=${EnterpriseFind.value.slaughterEnterpriseId}`)
        .then(res => {
            console.log(res.data)
            fileListCultivationEnterprise.value = []
            if (res.data.length > 0) {

                res.data.forEach((c: any) => {
                    fileListCultivationEnterprise.value.push({ name: c.imageId, url: c.imageAddress })
                });

            }
        })
}
//上传图片限制
const exceedImages = () => {
    ElMessage.error('最多上传9张图片')
}
onMounted(() => {
    getSlaughterFind()
    getSlaughterEnterpriseFind()
})
</script>